/**
 * 经过封装的视频文件显示组件，支持点击放大播放
 */
import { PlayCircleFilled } from '@ant-design/icons'
import { App } from 'antd'
import { flexCenter, fullAbsolute } from '@/desktop/styles'
import { useEmotionClassName } from '@/lib/emotion'

type ElementProps = React.DetailedHTMLProps<
  React.VideoHTMLAttributes<HTMLVideoElement>,
  HTMLVideoElement
>

/**
 * 注意：使用者需要指定视频最大宽度、高度时，应给 video 元素而不是 wrapper 指定，不然视频高度超出时，wrapper 无法限定 video 的尺寸。
 */
export function Video({ src, className, style, ...elementProps }: { src: string } & ElementProps) {
  const { modal } = App.useApp()
  const getClassName = useEmotionClassName()

  function preview() {
    modal.info({
      footer: null,
      centered: true,
      maskClosable: true,
      icon: null,
      className: getClassName(s.preview),
      content: <video controls autoPlay>
        <source src={src} type="video/mp4"></source>
      </video>,
    })
  }

  return <div css={s.wrapper} className={className} style={style} onClick={preview}>
    <video {...elementProps}>
      <source src={src} type="video/mp4"></source>
    </video>
    <div className="qun-video-mask">
      <PlayCircleFilled />
    </div>
  </div>
}

const s = {
  wrapper: css`
    background-color: #f0f0f0;
    cursor: pointer;
    display: inline-block;
    line-height: 0; // 避免容器和 video 间出现空白
    min-height: 60px;
    min-width: 60px;
    position: relative;

    video {
      border-radius: 4px;
      max-width: 100%;
      max-height: 100%;
    }

    .qun-video-mask {
      ${flexCenter};
      ${fullAbsolute};
      background-color: rgba(0, 0, 0, 0);
      color: rgba(255, 255, 255, 0.7);
      font-size: 55px;
      transition: all 0.3s;
    }
    &:hover > .qun-video-mask {
      background-color: rgba(0, 0, 0, 0.2);
      color: rgba(255, 255, 255, 0.8);
    }
  `,
  preview: css`
    .ant-modal-content {
      ${flexCenter};
      background-color: transparent;
      box-shadow: none;
      margin-top: -10vh;
      padding: 0;
    }
    video {
      border-radius: 6px;
      display: block;
      max-height: 70vh;
      max-width: 90vw;
    }
  `,
}
